<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .total {
            width: 500px;
        }
        .text {
            height: 80%;
            width: 75%;
        }
        .task {
            height: 100%;
            width: 22%;
            background-color: orange;
            color: white;
            border: none;
            margin: 0;
        }
        

        .first {
            height: 30px;
            display: flex;
            margin-bottom: 20px;
        }
        .first button:active {
            background-color: rgb(179, 174, 174);
        }

        .third {
            display: flex;
            text-align: center;
        }
        .second{
            background-color: black;
            color: white;
        }
        /* .del {
            width: 300px;
            text-align: left;
        } */
        .thirdone {
            width: 200px;
            text-align: left;
        }
        

    </style>
    <div class="total">
        <div class="first">
            <input type="text" class="text">
            <button class="task">新建任务</button>
        </div>
        <table style="width:100%;" class="second">
            <tr>
                <th><b>未完成</b></th>
                <th><b>已完成</b></th>
            </tr>
        </table>
        <div class="third">
            <div class="thirdone">
                <input type="checkbox"><span>吃饭</span>
            </div>
            <div class="del">
                <button >删除</button>
            </div>
        </div>
    </div>
    <script>
        let task = document.querySelector('.task');
        task.onclick = function() {
            let todel = document.querySelector('.total');
            let third = document.createElement('div');
            third.className = 'third';
            todel.appendChild(third);

            let newtask = (document.querySelector('.text')).value;
            console.log(newtask);
            let act = document.createElement('div');
            act.className = "thirdone";
            third.appendChild(act);
            let input = document.createElement('input');
            input.type = "checkbox";
            act.appendChild(input);
            let span = document.createElement('span');
            span.innerHTML = newtask;
            act.appendChild(span);
            let del = document.createElement('div');
            del.className = 'del';
            third.appendChild(del);
            let button = document.createElement('button');
            button.innerHTML = "删除"
            del.appendChild(button);

}
            
        
        let checkboxes = document.querySelectorAll('.thirdone input');
        for (let index = 0; index < checkboxes.length; index++) {
            if(checkboxes[index].checked) {
                let row = checkboxes[index].parentNode;
                row.width = "400px";
            }
            
        }
        
    </script>
    
    
    
    
</body>
</html>